<template>
  <!-- 还要搞订单详情 -->
  <view class="container">
    <orderskeleton v-if="initLoading"></orderskeleton>
    <block v-else>
      <uni-badge class="uni-badge-left-margin" :text="item.txFlowStatusInfo" absolute="rightBottom" :offset="[25,15]"
                 size="small"
                 v-for="item in orderlist" :key="item.id" @tap="taporderetas(item.orderNum)" style="width: 100%">
        <view
            :class="[item.status=='CANCEL_ORDERS'||item.status=='REJECT_ORDERS'?'dingdanitem flex-x-center status4':'dingdanitem flex-x-center']">
          <view class="title">
            <view class="" style="font-size: 26upx;">
              订单号:{{ item.orderNum }}
            </view>
            <view class="createtime" style="font-size: 26upx;">
              下单时间：{{ item.createTime }}
            </view>
            <view class="" style="font-weight: 700;">
              <!-- 门店:{{item.shopName}} -->
              {{ item.shopName }} - {{ item.carName }}
            </view>
            <!-- <view class="" > -->
            <!-- 车辆:{{item.carname}} -->

            <!-- </view> -->
            <view class="" style="font-size: 26upx;">
              <!-- 车牌:{{item.carnum}}-->
              {{ item.carNum }}
            </view>
            <view class="" style="font-size: 26upx;" v-if="item.snatchPersonName||item.snatchPersonTel">
              <text style="margin-right: 20upx;">送车接待员：{{ item.snatchPersonName }}
              </text>
              <text>手机号：{{ item.snatchPersonTel }}
                <uni-icons type="phone" size="20" color="#3366cc"
                           @tap="lianxiphone(item.snatchPersonName)"></uni-icons>
              </text>

            </view>
            <view class="" style="font-size: 26upx;" v-if="item.collectorName||item.collectorTel">
              <text style="margin-right: 20upx;">收车接待员：{{ item.collectorName }}
              </text>
              <text>手机号：{{ item.collectorTel }}</text>
            </view>
          </view>
          <view class="price-state">
            <view class="price">
              <text>￥</text>
              {{ item.totalMoney }}
            </view>
            <view class="state">
              {{
                orderdest.status == 'CONFIRM_COMPLETION' ? "已完成" : (orderdest.status == 'GENERATE_ORDER' ? "待支付" : (orderdest.status == 'PAYMENT_ORDER' ? '待送车' : (orderdest.status == 'USE_LOADING' ? '已取车' : (orderdest.status == 'CANCEL_ORDERS' ? '已取消' : (orderdest.status == 'RECEIVE_LOADING' ? '已还车' : (orderdest.status == 'ACCEPT_ORDERS' ? '已接单' : (orderdest.status == 7 ? '待还车' : (orderdest.status == 'USE_EXPIRE' ? '待收车' : ''))))))))
              }}
            </view>
            <!-- 		<view class="yuangongjiedan" v-if="item.snatchPersonName||item.snatchPersonTel">
              <view>{{item.snatchPersonName}}接单送车</view>
              <view class="">
                {{item.snatchPersonTel}}
              </view>
            </view>
            <view class="yuangongjiedan" v-if="item.collectorName||item.collectorTel">
              <view>{{item.collectorName}}接单收车</view>
              <view class="">
                {{item.collectorTel}}
              </view>
            </view> -->
            <view class="xuzu" v-if="item.iszx==1">
              已续租
            </view>
          </view>
        </view>
      </uni-badge>
      <!-- ,'退款/售后','5' -->
      <!-- 	<dd-tab :itemdata="['全部','待付款','待提车','待还车','押金结算中','已完成']" :itemst="['all','0','1','2','22','3']" :st="st" :isfixed="true" @changetab="changetab"></dd-tab> -->
    </block>
    <!-- <view class="" style="color: #999; text-align: center; font-size: 24upx; margin-top: 20upx;">
      {{ opt.pageSize >= opt.total / opt.pageNum ? '已展示所有订单' : '加载更多' }}
    </view> -->
    <uni-load-more iconType="auto" :status="status"/>
    <view style="width:100%;height:100rpx"></view>
    <nomore v-if="nomore"></nomore>
    <nodata v-if="nodata"></nodata>
    <loading v-if="loading"></loading>

  </view>
</template>

<script>
import {getordervehorderlist} from '../../utils/new_file.js'
import orderskeleton from './orderskeleton/orderskeleton.vue'

export default {
  components: {
    orderskeleton
  },
  data() {
    return {
      initLoading: true,
      st: 'all',
      // nodata: true,
      orderlist: [],
      opt: {
        pageSize: 10,
        pageNum: 1,
        total: 0
      },
      nomore: false,
      nodata: false,
      loading: false,
      status: 'more',
    };
  },
  onReachBottom() {
    console.log(this.opt.pageNum, this.opt.total / this.opt.pageSize);
    if (this.opt.pageNum >= this.opt.total / this.opt.pageSize) {
      console.log('mey');
      this.status = 'noMore'
    } else {
      this.status = 'loading'
      this.opt.pageNum++
      this.ordervehorderlistfun()
    }
  },
  onPullDownRefresh() {
    this.opt.pageNum = 1
    this.opt.pageSize = 10
    this.opt.total = 0
    this.orderlist = []
    this.status = 'more'
    this.ordervehorderlistfun(() => {
      uni.stopPullDownRefresh()
    })
    // setTimeout(() => {
    //     uni.stopPullDownRefresh()
    //    }, 2000)
  },
  created() {
    // this.ordervehorderlistfun()
  },
  onShow() {
    this.opt.pageNum = 1
    this.opt.pageSize = 10
    this.opt.total = 0
    this.orderlist = []
    this.ordervehorderlistfun(() => {
      this.initLoading = false
    })
    const pages = getCurrentPages(); // 获取页面栈
    console.log(pages);
    if (!getApp().checkLogin()) { // 假设checkLogin()是你用来检查登录状态的函数
      // 获取当前页面栈
      let pages = getCurrentPages();
      // 获取当前页面
      let currentPage = pages[pages.length - 1];
      // 获取页面路径
      let pagePath = currentPage.route;
      uni.redirectTo({
        url: '/pages/login/login?geturl=' + pagePath
      });
    }
  },
  methods: {
    lianxiphone(phone) {
      console.log(phone);
      // 在某个事件处理函数中调用拨号功能
      uni.makePhoneCall({
        phoneNumber: phone, // 要拨打的电话号码
        success: function () {
          console.log('拨号成功');
        },
        fail: function (error) {
          console.error('拨号失败', error);
        },
      })
    },
    async ordervehorderlistfun(back) {
      this.loading = true;
      let id = uni.getStorageSync('useinfo').id
      let obj = {
        wid: id,
        pageSize: this.opt.pageSize,
        pageNum: this.opt.pageNum
      }
      getordervehorderlist(obj).then(data => {
        if (data.data.code == 200) {

          this.loading = false;
          console.log(this.orderlist);
          this.opt.total = data.data.total
          this.orderlist = [...this.orderlist, ...data.data.rows]
          this.status = 'more'
          if (this.orderlist.length == 0) {

            this.nodata = true
          } else {
            this.nodata = false
          }
        } else {
          this.nodata = true
        }
        if (back != undefined) {
          back()
        }
      })

    },
    taporderetas(orderNum) {
      uni.navigateTo({
        url: '/pagesB/orderdetails/orderdetails?orderNum=' + orderNum
      })
    },
    changetab: function (st) {
      // if(st == 5){
      // app.goto('refundlist');return;
      // }
      this.st = st;
      uni.pageScrollTo({
        scrollTop: 0,
        duration: 0
      });
      // this.getdata();
    },
  }
}
</script>

<style lang="less">
.dingdanitem {
  background-color: white;
  margin: 0 2vw;
  box-sizing: border-box;
  width: 96vw;;
  margin-top: 10upx;
  border-radius: 12upx;
  padding: 25upx 20upx 30upx 20upx;
  justify-content: space-between;
  font-size: 30upx;

  .titie {
    line-height: 45upx;
  }

  .price-state {
    text-align: right;

    .price {
      text {
        font-size: 20upx;
      }

      color: red;
    }

    .xuzu {
      color: #1aad19;
      font-size: 26upx;
    }

    .yuangongjiedan {
      margin-top: 20upx;

      view {
        height: 60upx;
        line-height: 60upx;
        text-align: center;
        font-size: 26upx;
        padding: 0 30upx;
        // border: 1upx solid #409eff;
        color: #fff;
        background-color: #999;
      }

      button {
        // margin-left: 15upx;
        width: 130upx;
        height: 60upx;
        line-height: 60upx;
        text-align: center;
        font-size: 26upx;
        padding: 0;
        border: 1upx solid #409eff;
        color: #fff;
        background-color: #409eff;
      }

    }

    .state {
      color: #666;
      font-size: 26upx;
    }
  }
}

.status4 {
  color: #999 !important;

  .price {
    color: #999 !important;
  }

  .state {
    color: #999 !important;
  }
}
</style>